<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随访记录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f5f7fa;
            height: 100vh;
            display: flex;
        }

        .sidebar {
            width: 280px;
            background-color: #fff;
            border-right: 1px solid #eaeaea;
            position: relative;
            overflow: hidden;
        }

        .add-button {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #1890ff;
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .timeline {
            padding: 15px 0;
            position: relative;
        }

        .timeline::before {
            content: "";
            position: absolute;
            width: 2px;
            background-color: #e8e8e8;
            top: 0;
            bottom: 0;
            left: 19px;
        }

        .timeline-item {
            position: relative;
            padding: 10px 20px 10px 40px;
            cursor: pointer;
        }

        .timeline-item.active {
            background-color: #e6f7ff;
        }

        .timeline-dot {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            left: 15px;
            top: 16px;
            z-index: 1;
        }

        .timeline-dot.red {
            background-color: #f5222d;
        }

        .timeline-dot.green {
            background-color: #52c41a;
        }

        .timeline-dot.blue {
            background-color: #1890ff;
        }

        .timeline-date {
            color: #888;
            font-size: 14px;
        }

        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: #f5f7fa;
        }

        .nav-tabs {
            display: flex;
            border-bottom: 1px solid #eaeaea;
            background-color: #fff;
        }

        .nav-tab {
            padding: 12px 24px;
            cursor: pointer;
            position: relative;
            color: #666;
        }

        .nav-tab.active {
            color: #1890ff;
            font-weight: 500;
        }

        .nav-tab.active::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 24px;
            right: 24px;
            height: 2px;
            background-color: #1890ff;
        }

        .chat-container {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        .audio-player {
            background-color: #fff;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }

        .audio-controls {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .play-button {
            width: 36px;
            height: 36px;
            background-color: #1890ff;
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            cursor: pointer;
        }

        .progress-container {
            flex: 1;
            position: relative;
        }

        .progress-bar {
            height: 4px;
            background-color: #e1e1e1;
            border-radius: 2px;
            position: relative;
        }

        .progress-fill {
            position: absolute;
            height: 100%;
            background-color: #1890ff;
            border-radius: 2px;
            width: 40%;
        }

        .time-display {
            position: absolute;
            right: 0;
            top: -20px;
            font-size: 12px;
            color: #999;
        }

        .volume-control {
            margin-left: 15px;
            color: #999;
            cursor: pointer;
        }

        .quality-toggle {
            margin-left: 15px;
            font-size: 13px;
            color: #666;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .quality-toggle i {
            margin-left: 4px;
            font-size: 12px;
        }

        .audio-info {
            text-align: center;
            font-size: 12px;
            color: #999;
        }

        .message {
            margin-bottom: 20px;
            position: relative;
        }

        .message-time {
            text-align: center;
            margin-bottom: 10px;
            font-size: 12px;
            color: #999;
        }

        .message-content {
            display: flex;
            max-width: 70%;
        }

        .message.left .message-content {
            float: left;
        }

        .message.right .message-content {
            float: right;
            flex-direction: row-reverse;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ccc;
            overflow: hidden;
            margin: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar.robot {
            background-color: #e6f7ff;
            color: #1890ff;
        }

        .bubble {
            padding: 12px 16px;
            border-radius: 10px;
            position: relative;
            word-break: break-word;
            max-width: 100%;
        }

        .message.left .bubble {
            background-color: #f2f3f5;
            border-top-left-radius: 0;
        }

        .message.right .bubble {
            background-color: #e6f7ff;
            border-top-right-radius: 0;
            color: #333;
        }

        .message-indicator {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            margin-top: 6px;
            display: inline-block;
        }

        .message.left .message-indicator {
            margin-left: 60px;
            background-color: #f9f9f9;
            color: #999;
        }

        .message.right .message-indicator {
            float: right;
            margin-right: 60px;
            background-color: #f0f7ff;
            color: #1890ff;
        }

        .message::after {
            content: "";
            display: table;
            clear: both;
        }

        .message-footer {
            margin-top: 5px;
            font-size: 12px;
            color: #999;
            display: flex;
            align-items: center;
        }

        .message.left .message-footer {
            margin-left: 60px;
        }

        .message.right .message-footer {
            margin-right: 60px;
            justify-content: flex-end;
        }

        .message-duration {
            margin-left: 10px;
        }

        .chat-footer {
            background-color: #fff;
            padding: 10px;
            display: flex;
            align-items: center;
            border-top: 1px solid #eaeaea;
        }

        .chat-footer-tools {
            display: flex;
        }

        .tool-button {
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #666;
            margin-right: 5px;
            border-radius: 4px;
            cursor: pointer;
        }

        .tool-button:hover {
            background-color: #f5f5f5;
        }

        .tool-button.send {
            background-color: #f5222d;
            color: white;
            margin-left: 5px;
        }

        .input-area {
            flex: 1;
            margin: 0 10px;
            border: 1px solid #eaeaea;
            border-radius: 4px;
            height: 36px;
            display: flex;
            align-items: center;
            padding: 0 10px;
        }

        /* 其他样式 */
        .voice-icon {
            display: inline-block;
            width: 15px;
            height: 15px;
            background-color: #1890ff;
            border-radius: 50%;
            text-align: center;
            line-height: 15px;
            color: white;
            font-size: 10px;
            margin-right: 5px;
        }

        .clear-both {
            clear: both;
        }
    </style>
</head>
<body>
<div class="sidebar">
    <div class="add-button">+</div>
    <div class="timeline">
        <div class="timeline-item active">
            <div class="timeline-dot red"></div>
            <div class="timeline-date">随访日期：20210101</div>
        </div>
        <div class="timeline-item">
            <div class="timeline-dot green"></div>
            <div class="timeline-date">随访日期：20210201</div>
        </div>
        <div class="timeline-item">
            <div class="timeline-dot blue"></div>
            <div class="timeline-date">随访日期：20210301</div>
        </div>
    </div>
</div>

<div class="main-content">
    <div class="nav-tabs">
        <div class="nav-tab active">随访记录</div>
    </div>

    <div class="chat-container">
        <div class="audio-player">
            <div class="audio-controls">
                <div class="play-button">
                    ▶
                </div>
                <div class="progress-container">
                    <div class="progress-bar">
                        <div class="progress-fill"></div>
                    </div>
                    <div class="time-display">00:00 / 03:06</div>
                </div>
                <div class="volume-control">
                    🔊
                </div>
                <div class="quality-toggle">
                    倍速 <i>▼</i>
                </div>
            </div>
        </div>

        <div class="message left">
            <div class="message-time">2025-02-28 17:46:17</div>
            <div class="message-content">
                <div class="avatar robot">
                    👨‍⚕️
                </div>
                <div class="bubble">
                    我是您的健康管理小助手，专门负责痛风专病患者的院后随访工作。<br><br>
                    首先，希望您今天过得愉快，身体状况稳定。我是来了解一下您近期的健康状况的，请向自上次就诊以来，您的痛风症状有没有得到缓解呢？比如关节疼痛、红肿或者发热的情况有没有减轻或者完全消失？我是来了解一下您近期的健康状况的，请向自上次就诊以来，您的痛风症状有没有得到缓解呢？比如关节疼痛、红肿或者发热的情况有没有减轻或者完全消失？
                </div>
            </div>
            <div class="message-indicator">
                <span class="voice-icon">♪</span> 33.07" 00:00-00:33
            </div>
            <div class="message-footer">
                选择：院后随访 节点：开场白节点_u4lp65f5
            </div>
            <div class="clear-both"></div>
        </div>

        <div class="message right">
            <div class="message-content">
                <div class="avatar">
                    👤
                </div>
                <div class="bubble">
                    嗯，有呀，就是那个关节现在还痛，更严了，是不是那个睡觉压到来
                </div>
            </div>
            <div class="message-indicator">
                <span class="voice-icon">♪</span> 1.40" 00:15-00:17
            </div>
            <div class="message-footer">
                SN: db737758f5b811ef_2_2 □点击开打断-未进入流程-节点不允许打断
            </div>
            <div class="clear-both"></div>
        </div>

        <div class="message right">
            <div class="message-content">
                <div class="avatar">
                    👤
                </div>
                <div class="bubble">
                    呢，有呀，就是那个关节现在还痛，更严了，是不是那个睡觉压起来的声音变大了呀？
                </div>
            </div>
            <div class="message-indicator">
                <span class="voice-icon">♪</span> 10.28" 00:33-00:43
            </div>
            <div class="message-footer">
                SN: db737758f5b811ef_4_2 □未触发打断
            </div>
            <div class="clear-both"></div>
        </div>

        <div class="message right">
            <div class="message-content">
                <div class="avatar">
                    👤
                </div>
                <div class="bubble">
                    特别了解你，你们那个，
                </div>
            </div>
            <div class="message-indicator">
                <span class="voice-icon">♪</span> 3.44" 00:42-00:46
            </div>
            <div class="clear-both"></div>
        </div>
    </div>

    <div class="chat-footer">
        <div class="chat-footer-tools">
            <div class="tool-button">😀</div>
            <div class="tool-button">🖼️</div>
        </div>
        <div class="input-area">

        </div>
        <div class="chat-footer-tools">
            <div class="tool-button">🎙️</div>
            <div class="tool-button send">▶</div>
        </div>
    </div>
</div>
</body>
</html>
